<template>

    
    <div :id="ids" style="width: 90%; height: 88%" />

</template>

<script>
export default {
  name: "Annular",
  props: {
    id: {
      type: String,
      default: () => {
        return "";
      },
    },
    dataCon: {
      type: Array,
      default: () => {
        return [];
      },
    },
    colorList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      ids: this.id,
      myChart: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPie();
    });
  },
  methods: {
    imgBase() {
      this.myChart.getDataURL();
    },
    // 性别比例环形图
    drawPie() {
      const arrName = [];
      const arrValue = [];
      this.dataCon.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
      });
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById(this.ids));
      // 绘制图表

      var rich = {
        name: {
          color: "rgba(236, 238, 242, 1)",
          fontSize: 12,
          padding: [10, 10, 0, 10],
          fontWeight: "400",
        },
        hr: {
          borderColor: "rgba(63, 127, 255, 0.2)",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
        cir: {
          fontSize: 18,
          padding: [10, 10, 0, 10],
        },
      };

      var colorList = this.colorList
        ? this.colorList
        : ["#8618F8", "#07BFFE", "#15BAFF", "#23FFEA", "#13FF9F"];
      this.myChart.setOption({
        backgroundColor: "#ffffff",
        title: {
          text: "990",
          x: "34.5%",
          y: "center",
          textAlign: "center", //x不为'center'时我们需要使用其保持文字相对图的居中
          textStyle: {
            color: "#000000",
            fontSize: 24,
            width: "30px",
            align: "center",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          trigger: "item",
          show: true,
          top: "bottom",
          right: "14%",
          icon: "circle",
          itemWidth: 14,
          textStyle: {
            color: "#484848",
            fontSize: 14,
            lineHeight: this.dataCon.length > 12 ? 14 : 20,
            rich: {
              percent: {
                color: "#00000",
                fontSize: 14,
                padding: [0, 20, 0, 0],
              },
            },
          },
          formatter: (params) => {
            return (
              "{title|" +
              params +
              "} : {value|" +
              this.dataCon.find((item) => {
                return item.name == params;
              }).value +
              "" +
              "}"
            );
          },
        },
        // -----环形图---------------------------------------
        series: [
          {
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            type: "pie",
            radius: ["40%", "60%"],
            hoverAnimation: false,
            center: ["35.5%", "50%"],
            label: {
              normal: {
                position: "inner",
                formatter: (params) => {
                  return "";
                },
                rich: rich,
              },
            },
            data: this.dataCon,
          },
          {
            itemStyle: {
              normal: {
                opacity: 0.5,
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            type: "pie",
            radius: ["30%", "40%"],
            hoverAnimation: false,
            center: ["35.5%", "50%"],
            label: {
              normal: {
                position: "inner",
                formatter: (params) => {
                  return "";
                },
                rich: rich,
              },
            },
            data: this.dataCon,
          },
          // 外层白盘---------------------------------------------------
          //   {
          //     itemStyle: {
          //       normal: {
          //         color: 'rgba(63, 127, 255, 1)',
          //         shadowBlur: 6,
          //         shadowColor: 'rgba(63, 127, 255, 1)',
          //         shadowOffsetX: 0,
          //         shadowOffsetY: 0
          //       }
          //     },
          //     type: 'pie',
          //     silent: true, // 取消高亮
          //     radius: ['68%', '69%'],
          //     center: ['35.5%', '50%'],
          //     hoverAnimation: false, // 取消动画效果
          //     data: this.dataCon,
          //     label: {
          //       normal: {
          //         show: false,
          //         position: 'inner',
          //         formatter: params => {
          //           return (
          //             '{percent|' + params.percent.toFixed(0) + '%}'
          //           )
          //         },
          //         rich: rich
          //       }
          //     },
          //     z: -1
          //   }
        ],
      });
      setTimeout(() => {
        window.onresize = () => {
          this.myChart.resize();
        };
        const resizeObserver = new ResizeObserver((entries) => {
          this.myChart.resize();
        });
        resizeObserver.observe(document.getElementById(this.ids));
      }, 800);
    },
  },
};
</script>
